/**
 * 产品周报折线图
 * @author tongsitong
 */

import * as echarts from "echarts";
import {
  axisLabelStyle,
  axisLineStyle,
  splitLineStyle,
  TOOLTIP_FONT_SIZE,
  yaxisLabelStyle,
  yaxisLineStyle,
} from "@/utils/echarts";
import React from "react";
import { useEffect } from "react";
import * as _ from "lodash";

const ReportLine = (props) => {
  const { idName, lineData = {} } = props;

  const options = {
    series: [
      {
        name: lineData?.legend?.length > 0 && lineData?.legend[0],
        type: "line",
        data: lineData?.yaxis?.length > 0 && lineData?.yaxis[0].value,
        showSymbol: false,
        lineStyle: {
          width: 1,
        },
        connectNulls: true
      },
      {
        name: lineData?.legend?.length > 0 && lineData?.legend[1],
        type: "line",
        data: lineData?.yaxis?.length > 0 && lineData?.yaxis[1].value,
        showSymbol: false,
        lineStyle: {
          width: 1,
        },
        connectNulls: true
      },
      {
        name: lineData?.legend?.length > 0 && lineData?.legend[2],
        type: "line",
        data: lineData?.yaxis?.length > 0 && lineData?.yaxis[2].value,
        showSymbol: false,
        lineStyle: {
          width: 1,
        },
        connectNulls: true
      },
      {
        name: lineData?.legend?.length > 0 && lineData?.legend[3],
        type: "line",
        data: lineData?.yaxis?.length > 0 && lineData?.yaxis[3].value,
        showSymbol: false,
        lineStyle: {
          width: 1,
        },
        connectNulls: true
      },
    ],
    color:["#3457C4","#748295", "#17A785","#E85C36"],
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: lineData?.xaxis,
      axisLine: {
        ...axisLineStyle(),
        show: true,
      },
      axisLabel: {
        ...axisLabelStyle(),
        fontSize: 8,
      },
    },
    legend: {
      top: 0,
      itemWidth: 8,
      itemHeight: 8,
      icon: "rectangle",
      itemGap: 10,
      textStyle: {
        fontSize: 10,
        color: "#35425e",
        lineHeight: 28,
        padding: [-3, 0, -3, 2],
      },
      data: lineData?.legend?.length > 0 && lineData?.legend,
    },
    yAxis: {
      type: "value",
      ...yaxisLineStyle(),
      ...splitLineStyle(),
      axisLabel: {
        ...yaxisLabelStyle(),
        inside: false,
        fontSize: 8,
      },
    },
    // tooltip: {
    //   trigger: "axis",
    // },
    tooltip: {
      trigger: "axis",
      zIndex: 2,
      backgroundColor: "rgba(65,69,81,0.96)",
      extraCssText: "border-radius:2px",
      borderWidth: 0,
      textStyle: {
        fontSize: TOOLTIP_FONT_SIZE,
        color: "#fff",
        lineHeight: "28px",
      },
      valueFormatter: (value) => {
        return (
          (_.isNumber(value) ? value : "-") 
        );
      },
      formatter: (params) => {
        console.log(params)
        let htmlStr =
          '<div class="echarts_tooltip"><p style="margin:0; text-align: left">' +
          params[0].axisValue +
          "</p>";
        for (let i = 0; i < params.length; i++) {
          htmlStr += `<div ><p style="margin-right:8px" title="${
            params[i].seriesName
          }">${params[i].marker + params[i].seriesName}</p><p class="value">${
            params[i].value || '-'
          }</p></div>`;
        }
        htmlStr += "</div>";
        return htmlStr;
      },
    },
    grid: {
      left: 30,
      top: 50,
      bottom: 35,
      right: 18,
    },
  };
  // 窗口大小改变
  const handleChangeSize = () => {
    setTimeout(() => {
      const dom = document.getElementById(idName);
      dom?.removeAttribute("_echarts_instance_");
      handleGenBar();
    }, 1);
  };

  const handleGenBar = () => {
    const dom = document.getElementById(idName);
    if (dom) {
      const myChart = echarts.init(dom);
      myChart.setOption(options);

      myChart.on("mouseover", "series", (params: any) => {
        // options.tooltip.show = false;
        myChart.setOption(options);
      });
      myChart.on("mouseout", "series", (params: any) => {
        // options.tooltip.show = true;
        myChart.setOption(options);
      });
    }
  };
  useEffect(() => {
    console.log(lineData)
    handleGenBar();
    window.addEventListener("resize", handleChangeSize);
    return () => {
      const dom = document.getElementById(idName);
      dom?.removeAttribute("_echarts_instance_");
      window.removeEventListener("resize", handleChangeSize);
    };
  }, [lineData]);

  return (
    <div
      id={idName}
      style={{ width: "100%", height: "100%" }}
      //   className={styles.echarts_box}
      onClick={(e) => {
        e.stopPropagation();
      }}
    ></div>
  );
};
export default ReportLine;
